<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleCancel" center width="600px">
    <el-form ref="editFormRef" :model="editForm" :rules="rules" size="small">
      <el-form-item label="报修类型" :label-width="labelWidth" prop="name">
        <el-input
          :disabled="!isAdd"
          v-model="editForm.name"
          autocomplete="off"
          placeholder="请输入报修类型"
          maxlength="32"
        ></el-input>
      </el-form-item>
      <el-form-item label="工单类型" :label-width="labelWidth" prop="userNo">
        <el-select v-model="editForm.typeNo" placeholder="请选择工单类型" @change="handleTypeChange">
          <el-option
            v-for="item in tableTypeList"
            :key="item.typeNo"
            :label="item.typeName"
            :value="item.typeNo"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="主管人员" :label-width="labelWidth" prop="userNo">
        <el-select v-model="editForm.userNo" placeholder="请选择主管人员">
          <el-option v-for="item in mgrList" :key="item.userNo" :label="item.userName" :value="item.userNo"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="主管电话" :label-width="labelWidth" prop="tel">
        <el-input disabled v-model="mgrPhone" autocomplete="off" placeholder="主管电话" maxlength="32"></el-input>
      </el-form-item>
      <el-form-item label="是否启用" :label-width="labelWidth" prop="status">
        <el-radio-group v-model="editForm.status">
          <el-radio :label="100">启用</el-radio>
          <el-radio :label="200">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" :label-width="labelWidth" prop="remark">
        <el-input type="textarea" v-model="editForm.remark" :rows="6" maxlength="140" show-word-limit></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel" size="small">取 消</el-button>
      <el-button type="primary" @click="handleSave('editFormRef')" size="small">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addType, modifyType } from '../js/repair'
import pick from 'lodash.pick'
export default {
  name: 'RoleModal',

  props: {
    mgrList: {
      type: Array,
      required: false,
      default: () => []
    },
    tableTypeList: {
      type: Array,
      required: false,
      default: () => []
    }
  },
  data () {
    return {
      title: '报修类型新增',
      isAdd: false,
      dialogVisible: false, // 编辑弹窗
      labelWidth: '100px',
      editForm: {
        name: '',
        workOrderTypeNo: '',
        status: '',
        userNo: '',
        remark: ''
      },
      mgrPhone: '',
      model: {},
      rules: {
        name: [{ required: true, message: '请输入报修类型', trigger: 'blur' }],
        typeNo: [{ required: true, message: '请选择工单类型', trigger: 'blur' }],
        status: [{ required: true, message: '请选择是否启用', trigger: 'blur' }],
        userNo: [{ required: true, message: '请选择主管人员', trigger: 'blur' }],
        remark: [{ required: false, message: '请输入内容', trigger: 'blur' }]
      },
      workOrderTypeName: ''
    }
  },
  computed: {},
  watch: {
    'editForm.userNo': {
      handler (v) {
        if (v) {
          this.mgrPhone = this.mgrList.find(i => i.userNo === v).mobile
        }
      },
      immediate: true
    }
  },
  mounted () {},
  methods: {
    // 新增
    add () {
      this.edit({})
    },
    // 编辑
    edit (record) {
      this.dialogVisible = true
      this.mgrPhone = ''
      console.log(record)
      // record.typeNo = record.workOrderTypeNo
      this.model = Object.assign({}, record)
      console.log(this.model)
      this.$nextTick(() => {
        if (this.model.id) {
          this.workOrderTypeName = record.workOrderTypeName
          console.log('this.model')
          this.editForm = pick(this.model, 'id', 'name', 'workOrderTypeNo', 'userNo', 'status', 'remark')
        }
        console.log(this.workOrderTypeName)
      })
    },

    handleTypeChange (val) {
      this.tableTypeList.map(obj => {
        if (val === obj.typeNo) {
          this.typeName = obj.typeName
        }
      })
    },
    handleCancel () {
      this.dialogVisible = false
      this.model = {}
      this.editForm.workOrderTypeNo = null
      this.$refs.editFormRef.resetFields()
    },
    handleSave (editFormRef) {
      this.$refs[editFormRef].validate(async valid => {
        if (valid) {
          let res, msg
          const values = {
            name: this.editForm.name,
            userNo: this.editForm.userNo,
            status: this.editForm.status,
            remark: this.editForm.remark,
            workOrderTypeNo: this.editForm.typeNo,
            workOrderTypeName: this.typeName
          }
          console.log(values)
          if (!this.model.id) {
            res = await addType(Object.assign({}, values))
            msg = '保存成功！'
          } else {
            res = await modifyType(Object.assign({}, values, { id: this.model.id }))
            msg = '修改成功！'
          }
          if (res.code === 0) {
            this.$message.success(msg)
          } else {
            this.$message.warning(res.msg)
          }
          this.$emit('ok')
          this.handleCancel()
        }
      })
    },
    getTreeName (treeList, id) {
      let Deep, T, F
      for (F = treeList.length; F;) {
        T = treeList[--F]
        if (id === T.deptId) return T.deptName
        if (T.children) {
          Deep = this.getTreeName(T.children, id)
          if (Deep) return Deep
        }
      }
    },
    formatter (row, column, cellValue) {
      return this.$base.constFormatter(cellValue)
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: right;
}
.el-dialog {
  .el-input,
  .el-select {
    width: 100%;
  }
}
/deep/ .el-dialog__body {
  padding-bottom: 0;
}
</style>
